<template>
  <div>
    <ele-modal
      :width="1000"
      :model-value="modelValue"
      title="打印入库通知单"
      :body-style="{ overflow: 'auto', maxHeight: '60vh' }"
      @update:model-value="updateModelValue"
    >
      <ele-printer v-model="printing" :title="`入库通知单${info.order_sn}`" static target="_iframe">
        <div class="flex">
          <div class="flex-1 text-center pl-150px">
            <h2 class="m-0">{{ info.print_title ? info.print_title : `${info.warehouse_name} - 入库通知单` }} </h2>
            <ele-bar-code :value="info.order_sn" tag="svg" :options="{ height: 50, displayValue: true, fontOptions: 'bold', fontSize: '22', width: 1.8, margin: 5 }" />
            <div v-if="info.print_content?.length" class="flex-c text-left px-30px text-15px font-medium leading-22px mb-10px">
              <div class="text-left">
                <div v-for="(item, i) in info.print_content.filter((v, k) => k % 2 === 0)" :key="i">{{ item }}</div>
              </div>
              <div class="ml-30px">
                <div v-for="(item, i) in info.print_content.filter((v, k) => k % 2 === 1)" :key="i">{{ item }}</div>
              </div>
            </div>
          </div>
          <div class="w-150px text-right">
            <ele-qr-code :value="info.order_sn" tag="svg" :size="110" />
          </div>
        </div>
        <table border="1" cellspacing="0" class="w-full leading-24px">
          <thead>
            <tr>
              <th width="50px"></th>
              <th width="150px" style="text-align: center;">商品编码</th>
              <th>商品名称</th>
              <th width="100px" style="text-align: center;">数量</th>
              <th width="100px" style="text-align: center;">单位</th>
              <th width="180px" style="text-align: center;">辅助单位</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in info.product" :key="index">
              <td style="text-align: center">{{ index + 1 }}</td>
              <td style="text-align: center;">{{ row.product_code }}</td>
              <td style="text-align: center;">{{ row.product_name }}</td>
              <td style="text-align: center;">{{ row.notice_num }}</td>
              <td style="text-align: center;">{{ row.unit }}</td>
              <td style="text-align: center;">
                <span v-for="(r, k) in row.unit_list.filter(d => d.unit !== row.unit)" :key="k">
                  <span v-if="k" class="mx-3px">或</span>{{ Big(row.notice_num).div(r.ratio).round(4).toNumber() }}{{ r.unit }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="flex py-5px px-10px">
          <div class="flex-1">物流园签名：</div>
          <div class="flex-1">单据日期：{{ formatDate(info.create_time, 'YYYY-MM-DD HH:mm:ss') }}</div>
          <div class="flex-1 text-right">
            <div>制单人：{{ info.create_user_name }}</div>
            <div class="mt-2px text-#555">打印时间：{{ formatDate(0, 'YYYY-MM-DD HH:mm:ss') }}</div>
          </div>
        </div>
      </ele-printer>

      <template #footer>
        <el-button @click="openEdit">
          自定义打印标题、摘要
        </el-button>
        <el-button @click="updateModelValue(false)">
          取消
        </el-button>
        <el-button type="primary" @click="printing = true">
          打印
        </el-button>
      </template>
    </ele-modal>
    <ele-modal
      v-model="showEdit"
      :width="420"
      title="自定义打印标题、摘要"
    >
      <el-form :model="form" label-width="auto">
        <el-form-item label="标题">
          <el-input v-model="form.title" clearable :placeholder="`${info.warehouse_name} - 入库通知单`" />
        </el-form-item>
        <el-form-item label="摘要">
          <el-input v-model="form.content" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" :placeholder="`收货仓库：${info.warehouse_name}\r\n收货人：xxx\r\n(多个摘要以换行形式填写)`" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEdit = false">
          取消
        </el-button>
        <el-button type="primary" @click="save">
          保存
        </el-button>
      </template>
    </ele-modal>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user'

const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
  /** 修改回显的数据 */
  objId: Number,
})

const emit = defineEmits(['update:modelValue'])

const userStore = useUserStore()

/** 当前用户信息 */
const mchName = computed(() => userStore.mchName)

const printing = ref(false)

const info = ref({})

const { formatDate, Big } = utils
/** 更新modelValue */
function updateModelValue(value) {
  emit('update:modelValue', value)
}

function getInfo() {
  utils.get('/enterNotice/info', { id: props.objId }).then((res) => {
    if (/^\{.*\}$/.test(res.data.print_extend)) {
      const extend = JSON.parse(res.data.print_extend) || {}
      res.data.print_title = extend.title || ''
      res.data.print_content = extend.content ? extend.content.split(/[(\r\n)]+/) : []
    }
    info.value = res.data
  })
}

const showEdit = ref(false)

const [form, resetFields, assignFields] = utils.useFormData({
  title: '',
  content: '',
})

function openEdit() {
  if (/^\{.*\}$/.test(info.value.print_extend)) {
    assignFields(JSON.parse(info.value.print_extend))
  }
  else {
    resetFields()
  }
  showEdit.value = true
}

function save() {
  utils.post('/enterNotice/printExtend', { id: info.value.id, extends: JSON.stringify(form) }).then((res) => {
    utils.message(res.msg, res.success)
    if (res.success) {
      getInfo()
      showEdit.value = false
    }
  })
}

watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    getInfo(newVal)
  }
})
</script>

<style lang="scss" scoped>

</style>
